<template>
  <div class="vis-container" :class="classes">
    <h3 class="title" :style="titleStye">{{ title }}</h3>
    <div class="slot">
      <!-- @slot Use this slot to place the container content -->
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'VisContainer'
})
export default class VisContainer extends Vue {
  /**
   * title 标题
   */
  @Prop({
    type: String
  })
  title!: string
  /**
   * title-size 标题背景大小
   */
  @Prop({
    type: String,
    validator: (value: string) => {
      return ['275', '528', '544', '665'].includes(value)
    }
  })
  titleBgSize!: string
  /**
   * border 是否添加边框
   */
  @Prop({
    type: Boolean,
    default: false
  })
  border!: boolean

  get classes() {
    const { border } = this.$props
    return {
      bordered: border
    }
  }

  get titleStye() {
    const { titleBgSize } = this.$props
    const img = require(`../assets/images/${titleBgSize}.png`)
    return {
      background: `url(${img}) no-repeat left bottom / contain`
    }
  }
}
</script>
<style lang="scss" scoped>
.vis-container {
  display: flex;
  padding: 24px;
  flex-direction: column;

  &.bordered {
    background: url(../assets/images/border.png) no-repeat center / 100% 100%;
  }

  .title {
    padding-bottom: 5px;
    font-size: $font-size-bigger;
  }

  .slot {
    flex: 1;
  }
}
</style>
